import React, { useState } from 'react';

export default function Dot({ index, mode, radius, point, setDragging }) {
  const [x, y, weight] = point;
  const darkness = 255 * (1 - weight);
  const [currentRadius, setCurrentRadius] = useState(radius);
  return (
    <div
      style={{
        width: currentRadius * 2,
        height: currentRadius * 2,
        borderRadius: currentRadius,
        backgroundColor: `rgb(${darkness}, ${darkness}, ${darkness})`,
        cursor: mode == 'Move' ? 'move' : 'crosshair',
        position: 'absolute',
        left: x - currentRadius,
        top: y - currentRadius,
      }}
      onMouseOver={() => {
        if (mode == 'Move') {
          setCurrentRadius(radius * 2);
        }
      }}
      onMouseOut={() => {
        if (mode == 'Move') {
          setCurrentRadius(radius);
        }
      }}
      onMouseDown={() => {
        if (mode == 'Move') {
          setDragging({
            index,
            isDragging: true,
          });
        }
      }}
    />
  );
}
